<template>
  <div>
    AppContent:{{message}}
  </div>
  <button @click="changeMessage">修改message</button>
  <ShowInfo name="why" :age="19"
  @info-btn-click="infoBtnClick"
  ref="showInfoRef">

  </ShowInfo>
</template>

<script setup>
import {ref,onMounted} from "vue";

import ShowInfo from './ShowInfo.vue'

const message=ref('Hello World')

const showInfoRef=ref()

onMounted(()=>{
  showInfoRef.value.foo()
  console.log("showInfoRef.value.myName:",showInfoRef.value.myName) // => ding+
})

console.log(message.value)

function changeMessage(){
  message.value='你好啊，李银河！'
}

function infoBtnClick(payload){
  console.log("见听到showInfo内部点击：",payload)
}



</script>

<style scoped>

</style>